import React,{useEffect,useState} from "react";
import { Row, Col, Card,Table, Divider, Tag } from 'antd';
import { getData} from "../../api/index"
import * as Icon  from '@ant-design/icons';
import  * as echarts from "echarts"
import Echarts from "../../components/Echarts";
import './home.css'
import MyEcharts from '../../components/Echarts/index'

//table的数据
const colums  = [
    {
        title:'课程',
        dataIndex:'name'
    },
    {
        title:'今日购买',
        dataIndex:'todayBuy'
    },
    {
        title:'本月购买',   
        dataIndex:'monthBuy'
    },
    {
        title:'累计购买',
        dataIndex:'totalBuy'
    },
]
const iconToElement =(icon)=>{
    return React.createElement(Icon[icon])
    // 这里的是动态的react组件,，映射得到对应的图标
}

//订单的数据
const countData =  [
    {
      name: "今日支付订单",
      value: 1234,
      icon: "SettingOutlined",
      color: "#2ec7c9",
    },
    {
      name: "今日收藏订单",
      value: 210,
      icon: "SettingOutlined",
      color: "#ffb980",
    },
    {
      name: "今日未支付订单",
      value: 1234,
      icon: "SettingOutlined",
      color: "#5ab1ef",
    },
    {
      name: "本月支付订单",
      value: 1234,
      icon: "SettingOutlined",
      color: "#2ec7c9",
    },
    {
      name: "本月收藏订单",
      value: 210,
      icon: "SettingOutlined",
      color: "#ffb980",
    },
    {
      name: "本月未支付订单",
      value: 1234,
      icon: "SettingOutlined",
      color: "#5ab1ef",
    },
  ]
const Home = () => {
    const userImg = require("../../assets/user.png")
    //创建echart的数据
    const [echartData,setechartsData] = useState({})
    useEffect(()=>{
        getData().then(res=>{
          
            settableData(res.data.tableData)
            const order = res.data.orderData
            // x轴数据
            const xdata = order.date
            console.log(res.data.orderData)
           

            //series数据组装
            const keyArray = Object.keys(order.data[0])
            console.log(keyArray,'keyArray')
            const series = []
            keyArray.forEach(key =>{
                series.push({
                    name:key,
                    type:"line",
                    data:order.data.map(item=> item[key]
                    )
                })
            
            })
            console.log(series,'series')
           
             setechartsData({ 
                // @ts-ignore
                order:{
                    xdata,
                    series

                },
                //柱状图
                user:{
                    xdata:res.data.userData.map(item=>item.date),
                    //x轴的数据
                    series:[
                        {
                            name:'新增用户',
                            data:res.data.userData.map(item=>item.new),
                            type:'bar'
                        },
                        {
                            name:'活跃用户',
                            data:res.data.userData.map(item=>item.active),
                            type:'bar'
                        },

                    ]
                },
                //饼状图
                video:{
                    series:[
                        {
                            data:res.data.videoData,
                            type:'pie'
                        }
                    ]
                }

             })
             console.log(order,'订单数据')






            
        })
        //dom的首次加载
    },[])
    const [tableData,settableData] = useState([])
    return (
        <Row className="home">
            <Col span={8}>
                <Card hoverable>
                    <div className="user">
                      <img src = {userImg}></img>
                      <div className="userinfo">
                        <p className="name">Admin</p>
                        <p className="access">超级管理员</p>
                      </div>

                    </div>
                    <div className="login-info">
                        <p> 
                            上次登录时间：<span>2024-12-3 </span>
                           
                        </p>
                        <p>
                            上次登录地点：<span>192.168.1.1</span>
                        </p>

                    </div>

                </Card>
                <Card>
                    <Table rowKey={'name'} columns={colums} dataSource={tableData} pagination={false}>

                    </Table>

                </Card>


            </Col>

            <Col span={16}>
            <div className="num">
                {
                    countData.map((item,index)=>{
                        return (
                            <Card key={index} >
                                <div className="icon-box" style={{background:item.color}}>
                                    {iconToElement(item.icon)}
                                </div>
                                <div className="icon-detail">
                                    <p className="num"> ￥  {item.value}</p>
                                    <p className="text">{item.name}</p>
                                </div>
                            </Card>

                        )

                    })
                }
            

            </div>
            {echartData.order &&  <MyEcharts chartData={echartData.order} style={{height:'280px'}} ></MyEcharts>}
            {/* 要保证得到ehcartData中的order才能渲染 */}
            <div className="graph">

                { echartData.user && <MyEcharts chartData={echartData.user} style={{height:'240px',width:'50%'}} ></MyEcharts>}
                { echartData.video && <MyEcharts chartData={echartData.video} isAxisChart={false} style={{height:'260px',width:'50%'}} ></MyEcharts>}


            </div>


            </Col>


        </Row>
    )
}
export default Home;